<template>
	<div id="app">
		<!-- banner -->
		<div class="ban" :style="'height:338px;background-image: url('+banImg+');background-size:cover;'">
		    <div class="txt" style="padding-top:99px;">
		        <div class="wp">
		            <h3>设计工作</h3>
		            <div class="desc">
		                <p>发现您的下一个职业转变，自由职业或实习工作</p>
		            </div>
		            <!-- <a @click="toPublishEpiboly">发布职位</a> -->
		        </div>
		    </div>
		</div>
		<!-- banner -->
		<!-- 内容 -->
		<div class="main">
		    <div class="wp">
		        <div class="g-boxq2">
		            <div class="m-topl">
		                <ul class="ul-listl3 ls">
		                    <li>
		                        <a @click="toHome" class="con">首页</a>
		                    </li>
		                    <li>
		                        <a @click="toJob" class="con">我的职位</a>
		                    </li>
		                    <li class="on">
		                        <a class="con">发布职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishEpiboly" class="con">项目外包</a>
		                    </li>
		                </ul>
		            </div>
		            <div class="m-formq2">
						<div class="items">
							<div class="item">
								<span class="left">职位名称</span>
								<div class="right">
									<i class="dian"></i>
									<input type="text" class="inp" placeholder="例如：游戏UI设计师、游戏ICON设计师、资深游戏UI设计师" v-model="addJobParam.title"/>
								</div>
							</div>
							<div class="item">
								<span class="left">公司</span>
								<div class="right">
									<i class="dian"></i>
									<input type="text" class="inp" placeholder="公司名称" v-model="addJobParam.companyName"/>
								</div>
							</div>
						</div>
						<div class="items">
							<div class="item">
								<span class="left">工作城市</span>
								<!-- <span class="left" v-else>工作城市（{{addJobParam.addressShow}}）</span> -->
								<div class="right">
									
									<i class="dian"></i>
									<el-cascader
									style="width: 100%;"
									size="large"
									:options="options"
									v-model="selectedOptions"
									@change="handleChange"
									placeholder="选择地址"
									>
								</el-cascader>
								</div>
							</div>
							<div class="item">
								<span class="left">工作性质</span>
								<div class="right">
									<i class="dian"></i>
									<el-select v-model="addJobParam.jobNature" clearable placeholder="请选择" style="width: 100%;">
										<el-option
											v-for="(item,idx) in jobNatureList"
											:key="idx"
											:label="item.title"
											:value="item.title">
										</el-option>
									</el-select>
								</div>
							</div>
						</div>
						<div class="items">
							<div class="item">
								<span class="left">行业类型</span>
								<div class="right">
									<i class="dian"></i>
									<el-select v-model="addJobParam.jobType" clearable placeholder="请选择" style="width: 100%;">
									<el-option
										v-for="item in companyNatureList"
										:key="item.title"
										:label="item.title"
										:value="item.title">
									</el-option>
								</el-select>
								</div>
								
							</div>
							<div class="item">
								<span class="left">月薪范围</span>
								<div class="right">
									<i class="dian"></i>
									<el-select v-model="addJobParam.salary" clearable placeholder="请选择" style="width: 100%;">
										<el-option
											v-for="item in salaryList"
											:key="item.title"
											:label="item.title"
											:value="item.title">
										</el-option>
									</el-select>
								</div>
							</div>
						</div>
						<div class="items">
							<div class="item">
								<span class="left">公司官网</span>
								<div class="right">
									<input type="text" class="inp" placeholder="例如：https://www.gameui.net/" v-model="addJobParam.companyUrl"/>
								</div>
							</div>
							<div class="item">
								<span class="left">简历发送至</span>
								<div class="right">
									<i class="dian"></i>
									<input type="text" class="inp" placeholder="例如：hr@gameui.net" v-model="addJobParam.companyEmail"/>
								</div>
							</div>
						</div>
						<div class="items items2">
							<div class="item">
								<span class="left">职位描述</span>
								<div class="right">
									<i class="dian"></i>
									<!-- <textarea placeholder="请输入职位描述" v-model="addJobParam.jobDescription"></textarea> -->
									<quillEditor class="rmk-quill-editor" v-model="addJobParam.jobDescription" :options="quillEditorOption1"></quillEditor>
								</div>
							</div>
						</div>
						<div class="items items2">
							<div class="item last">
								<span class="left">职位要求</span>
								<div class="right">
									<i class="dian"></i>
									<!-- <textarea placeholder="请输入职位要求" v-model="addJobParam.skillDescription"></textarea> -->
									<quillEditor class="rmk-quill-editor" v-model="addJobParam.skillDescription" :options="quillEditorOption2"></quillEditor>
								</div>
							</div>
						</div>
						<input type="button" class="sub-btn" :value="addJobParam.id?'更新职位':'发布职位'" @click="addJob"/>
		            </div>
		        </div>
		    </div>
		</div>
		<!-- 内容 -->
	</div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
	import common from '../../../static/utils/common.js';
	import API from '../../../static/utils/API.js';
	import layer from "layui-layer";
	import { regionData,provinceAndCityData, CodeToText,TextToCode } from "element-china-area-data";

	export default{
		components:{
			layer,quillEditor
		},
		data() {
			return {
      quillEditorOption1:{
					 placeholder:'请输入职位描述',
					 modules:{
						 clipboard:{
						 	matchers:[
								['img',this.handleCustomerMatcher]
							]
						},
						toolbar:{
							container:[
								['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'],                      //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }],               // 几级标题
								[{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，无序列表
								[{ 'script': 'sub'}, { 'script': 'super' }],      // 下角标，上角标
								[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
								[{ 'direction': 'rtl' }],                         // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
								[{ 'color': [] }, { 'background': [] }],          // 颜色选择
								[{ 'font': [] }],// 字体
								[{ 'align': [] }], // 居中
								['clean'],
								 ['link', 'image', 'video']
							]
						}
					 }
				 },
      quillEditorOption2:{
					 placeholder:'请输入职位要求',
					 modules:{
						 clipboard:{
						 	matchers:[
								['img',this.handleCustomerMatcher]
							]
						},
						toolbar:{
							container:[
								['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'],                      //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }],               // 几级标题
								[{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，无序列表
								[{ 'script': 'sub'}, { 'script': 'super' }],      // 下角标，上角标
								[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
								[{ 'direction': 'rtl' }],                         // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
								[{ 'color': [] }, { 'background': [] }],          // 颜色选择
								[{ 'font': [] }],// 字体
								[{ 'align': [] }], // 居中
								['clean'],
								 ['link', 'image', 'video']
							]
						}
					 }
				 },
				banImg:require('../../assets/images/banq1.jpg'),
				jobNatureParam: {
					type: 'job_nature'
				},
				jobNatureList: [],
				salaryParam: {
					type: 'job_salary'
				},
				salaryList: [],
				companyNatureParam: {
					type: 'company_nature',
				},
				companyNatureList: [],
				addJobParam: {
					title: '',
					companyName: '',
					city: '',
					jobNature: '',
					jobType: '',
					salary: '',
					companyUrl: '',
					companyEmail: '',
					jobDescription: '',
					skillDescription: ''
				},
				ys: '4',
				options: regionData,
				selectedOptions: [],
				jobId:'',
				jobDetailsParam: {
					
				},
				addressShow:''
			}
		},
		mounted() {
			this.options.forEach(f=>{
				if(f.children){
					f.children.forEach(s=>{
						if(s.label=='市辖区'){
							f.children=s.children;
						}
					})
				}
			})
			this.jobId = this.$route.params.id
			this.jobDetailsParam.id = this.jobId
			if(this.jobId != undefined){
				this.getJobDetails()
			}
			this.getJobNatureList()
			this.getCompanyNatureList()
			this.getSalaryList();
	    },
		methods: {
			getJobDetails() {
				var that =  this
				common.requestGet(API.jobDetails,this.jobDetailsParam,function(result){
					that.addJobParam = result.data
					that.addJobParam.addressShow = that.addJobParam.province+'/'+that.addJobParam.city+'/'+that.addJobParam.area;
					let defaultOptions=[];
					if(result.data.province){
						defaultOptions.push(TextToCode[result.data.province].code)
					}
					if(result.data.city){
						if(TextToCode[result.data.province][result.data.city]){
							defaultOptions.push(TextToCode[result.data.province][result.data.city].code)
						}
					}
					if(result.data.area){
						if(TextToCode[result.data.province][result.data.city][result.data.area]){
							defaultOptions.push(TextToCode[result.data.province][result.data.city][result.data.area].code)
						}
					}
					that.$nextTick(()=>{
						that.selectedOptions=defaultOptions;
					})
				})
			},
			handleChange() {
			  var loc = "";
			  let that = this
			  for (let i = 0; i < this.selectedOptions.length; i++) {
				loc += CodeToText[this.selectedOptions[i]];
				if(i == 0){
					that.addJobParam.province = CodeToText[this.selectedOptions[i]]
				}
				if(i == 1){
					that.addJobParam.city = CodeToText[this.selectedOptions[i]]
				}
				if(i == 2){
					that.addJobParam.area = CodeToText[this.selectedOptions[i]]
				}
			  }
			},
			toHome: function(){
				this.$router.push("/recruitHome");
			},
			toJob: function(){
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.$router.push("/job");
			},
			toPublishJob: function(){
				this.$router.push("/publishJob");
			},
			// toProjectEpiboly: function(){
			// 	this.$router.push("/projectEpiboly");
			// },
			toPublishEpiboly: function(){
				this.$router.push("/publishEpiboly");
			},
			getJobNatureList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.jobNatureParam,function(result){
					if(result.code == 0){
						that.jobNatureList = result.data.job_nature
					}
				})
			},
			getCompanyNatureList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.companyNatureParam,function(result){
					if(result.code == 0){
						that.companyNatureList = result.data.company_nature
					}
				})
			},
			getSalaryList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.salaryParam,function(result){
					if(result.code == 0){
						that.salaryList = result.data.job_salary
					}
				})
			},
			addJob() {
				// title: '',
				// 	companyName: '',
				// 	city: '',
				// 	jobNature: '',
				// 	jobType: '',
				// 	salary: '',
				// 	companyUrl: '',
				// 	companyEmail: '',
				// 	jobDescription: '',
				// 	skillDescription: ''
				let data=Object.assign({},this.addJobParam);
				if(!data.title){
					layer.msg('职位名称不能为空!');
					return
				}
				if(!data.companyName){
					layer.msg('公司名称不能为空!');
					return
				}
				if(!data.city){
					layer.msg('请选择工作城市!');
					return
				}
				if(!data.jobNature){
					layer.msg('请选择工作性质!');
					return
				}
				if(!data.jobType){
					layer.msg('请选择行业类型!');
					return
				}
				if(!data.salary){
					layer.msg('请选择月薪范围!');
					return
				}
				if(!data.companyEmail){
					layer.msg('请填写简历发送目标邮箱!');
					return
				}
				var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
				if(!reg.test(data.companyEmail)){
					layer.msg("邮箱格式不正确");
					return;
				}
				if(!data.jobDescription){
					layer.msg('请填写职位描述!');
					return
				}
				if(!data.skillDescription){
					layer.msg('请填写职位要求!');
					return
				}
				var that =  this
				let url = ''
				if(this.jobId == undefined){
					url = API.jobAdd
				}else{
					url = API.jobEdit
				}
				if(data.member){
					delete data.member;
				}
				common.requestPost(url,data,function(result){
					if(result.code == 0){
						layer.msg(result.msg);
						that.toJob()
					}
				})
			},
		}
	}
</script>

<style>
</style>
